<template>
    <div class="container">
        <!-- top -->
        <div class="top">
            <div class="top-left">
                <img src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
                    alt="">
            </div>
            <div class="search">
                <i><svg t="1704868812158" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7189" width="20" height="20">
                        <path
                            d="M776.3 467c0-84.1-32.8-163.2-92.3-222.7-59.4-59.5-138.5-92.3-222.7-92.3s-163.2 32.8-222.7 92.3-92.3 138.6-92.3 222.7 32.8 163.2 92.3 222.7S377.2 782 461.3 782s163.2-32.8 222.7-92.3c59.6-59.5 92.3-138.6 92.3-222.7z m-315 255c-140.6 0-255-114.4-255-255s114.4-255 255-255 255 114.4 255 255-114.4 255-255 255zM864.4 776.1l-97.5-97.5c-17.7-17.7-46.7-17.7-64.5 0l-19 19c-17.7 17.7-17.7 46.7 0 64.5l97.5 97.5c17.7 17.7 46.7 17.7 64.5 0l19-19c17.7-17.7 17.7-46.7 0-64.5z"
                            fill="#B3B3B3" p-id="7190"></path>
                    </svg></i>
                <span>搜索</span>
            </div>
            <a class="top-right">
                <span>打开APP</span>
            </a>
        </div>
        <!-- 矢量图 -->
        <div @click="handleIsActive" class="right">
            <svg v-if="isActive" t="1704873575538" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5345" width="16" height="16">
                <path
                    d="M246.760727 686.964364L500.363636 412.206545l253.626182 274.757819a34.909091 34.909091 0 1 0 51.316364-47.36l-279.272727-302.545455a34.909091 34.909091 0 0 0-51.316364 0l-279.272727 302.545455a34.909091 34.909091 0 1 0 51.316363 47.36"
                    fill="#d81e06" p-id="5346"></path>
            </svg>
            <svg v-else t="1704873545940" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4185" width="16" height="16">
                <path
                    d="M778.496 403.456a30.72 30.72 0 0 1-8.96 21.76l-230.4 230.4a30.72 30.72 0 0 1-43.52 0l-230.4-230.4a30.72 30.72 0 1 1 43.52-43.52l208.64 208.64 208.64-208.64a30.72 30.72 0 0 1 51.2 21.76z"
                    p-id="4186" fill="#8a8a8a"></path>
            </svg>
        </div>
        <!-- 分类 -->
        <div class="recommend" v-if="isActive">
            <div class="left">请选择分类</div>
            <div class="content">
                <p @click="getContentList2(item.name,index)" class="item" v-for="(item,index) in listenList" :key="index">{{ item.title }}</p>
            </div>
        </div>
        <!-- nav -->
        <div class="tabbar" v-else>
            <div class="custom-scrollbar">
                <div class="scrollbar-flex-content">
                    <div @click="getContentList(item.name,index)" v-for="(item, index) in listenList" :key="index" :class="borderColor === index ? 'scrollbar-demo-item border-bottomcolor' : 'scrollbar-demo-item'">
                        <span>{{ item.title }}</span>
                    </div>
                    <!-- 占位, -->
                    <div v-if="listenList.length" style="width: 100px;height: 34px;">xxx</div>
                </div>
            </div>
        </div>
        <!-- trim 顶位置 -->
        <div class="trim" v-if="isActive"></div>
        <!-- 内容区域 -->
        <div style="padding-top: 30px;" class="text" >
            <div @click="handleToDetail" class="text-item" v-for="(item,index) in ContentList" :key="index">
                <img class="text-item-left"
                    :src="item.coverPathSmall" alt="">
                <div class="text-item-right">
                    <div class="title">{{item.title}}</div>
                    <div class="foot">
                        <i><svg t="1704891130465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4242" width="16" height="16"><path d="M513.92 408.832a64 64 0 0 0-97.92 54.272v97.856a64 64 0 0 0 97.92 54.272l78.272-48.96a64 64 0 0 0 0-108.544L513.92 408.832z m-33.92 54.272L558.272 512 480 560.96v-97.92z" p-id="4243" fill="#bfbfbf"></path><path d="M960 800v-576A96 96 0 0 0 864 128h-704A96 96 0 0 0 64 224v576A96 96 0 0 0 160 896h704a96 96 0 0 0 96-96zM800 192h64a32 32 0 0 1 32 32v128h-85.312a31.936 31.936 0 0 0-10.688 1.856V192z m0 222.208v195.584a31.936 31.936 0 0 1 10.688-1.792H896v-192h-85.312a31.936 31.936 0 0 1-10.688-1.792z m0 417.792v-161.792a32 32 0 0 0 10.688 1.792H896v128a32 32 0 0 1-32 32h-64zM128 416h85.312a32 32 0 0 0 10.688-1.792v195.584a32 32 0 0 0-10.688-1.792H128v-192z m0 384v-128h85.312a32 32 0 0 0 10.688-1.792V832h-64a32 32 0 0 1-32-32z m96-446.144a32 32 0 0 0-10.688-1.856H128v-128a32 32 0 0 1 32-32h64v161.856zM736 192v640h-448V192h448z" p-id="4244" fill="#bfbfbf"></path></svg></i>
                        <span class="num">{{item.dataCount}}</span>
                        <span class="date">2021-8-21更新</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onMounted } from 'vue';
import {reqList,reqContentList} from '@/api/listening/index'
// import {useRouter} from 'vue-router'
// const router = useRouter()
// 储存分类列表
const listenList = ref<any>([])

// 分类列表下的内容列表
const pageNum = 1;
const pageSize = 10;
const title = ref()
const ContentList = ref<any>([])

onMounted(()=>{
    getListenList();
    // 挂载自动获取remen内容数据
    reqContent({title: 'remen',pageNum,pageSize})
})
// 控制下拉与上拉的图标
const isActive = ref(false)
// 控制下边框的颜色
const borderColor = ref(1)
// 点击控制图标的显示
function handleIsActive() {
    isActive.value = !isActive.value
}

// 在分类列表中点击获取分类列表下的内容列表
const getContentList = (title: string,index: number)=>{
    let params = {title,pageNum,pageSize}
    reqContent(params)

    // 控制颜色的ref与下标相等
    borderColor.value = index
}

// 选择分类中点击获取分类列表下的内容列表
const getContentList2 = (title: string,index: number)=>{
    let params = {title,pageNum,pageSize}
    reqContent(params)
    // 控制图标与选择分类的显隐
    isActive.value = !isActive.value
    // 控制下边框
    borderColor.value = index
}

// 听单下的分类列表
async function getListenList(){
    try {
        let result = await reqList();
        if(result.ret === 200){
            listenList.value = result.data.categories
            title.value = result.data.categories[0].title
        }
    } catch (error) {
        
    }
}

// 获取分类列表下的内容列表的功能函数
async function reqContent(params: any){
    try {
        let result = await reqContentList(params)
        if(result.ret === 200){
            ContentList.value = result.data.subjects
        }
    } catch (error) {
        
    }
}

// 点击跳转
function handleToDetail(){
    // router.push(url: ``)
}
</script>

<style scoped lang="less">

div {
    font-family: '华文楷体';
}

.container {
    width: 100%;
    height: 100%;

}

.container .top {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    line-height: 30px;
    padding-top: 15px;
    position: fixed;
    top: 0px;
    z-index: 10000;
    background-color: white;
}

.top-left {
    position: relative;
    top: 0px;
    width: 65px;
    height: 25px;
    overflow: hidden;
    margin-left: 10px;
}

.top-left img {
    position: absolute;
    left: -37%;
    width: 80px;
    height: 30px;
}

.top .search {
    width: 200px;
    height: 30px;
    border-radius: 20px;
    background-color: #eff1f4;
    position: relative;
}

.search i {
    position: absolute;
    top: 3px;
    left: 5px;
}

/* 搜索 */
.search span {
    font-size: 13px;
    position: absolute;
    left: 30px;
    color: #ababab;
}

.top-right {
    border: 1px solid #f86442;
    border-radius: 15px;
    color: #f86442;
    font-size: 10px;
    text-align: center;
}

.top-right span {
    padding: 8px 10px;
}

/* 隐藏滚动条 */
.tabbar::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}

.tabbar::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.tabbar::-webkit-scrollbar-track {
    background-color: transparent;
}

// 图标
.right {
    height: 36px;
    width: 40px;
    position: absolute;
    right: 0px;
    top: 55px;
    background-color: white;
    box-sizing: border-box;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 37px;
    z-index: 666;
}

// nav
.tabbar {
    z-index: 20;
    height: 40px;
    line-height: 40px;
    display: flex;
    overflow-x: scroll;
    position: relative;
    left: 0;
    top: 21px;
    border-bottom: 1px solid #ccc;
    margin-top: 30px;
    
    .scrollbar-flex-content {
        display: flex;
        position: relative;
        .scrollbar-demo-item {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 35px;
            margin: 0 14px;
            text-align: center;
            font-size: 14px;
            padding-top: 4px;

        }

    }
}
// 头部分类的下边框
.border-bottomcolor{
    border-bottom: 2px solid #f86442;
}

// 分类
.recommend {
    position: fixed;
    top: 45px;
    width: 100%;
    background-color: white;
    .left {
        padding-top: 5px;
        color: #ccc;
        padding-left: 10px;
        height: 41px;
        line-height: 41px;
        font-size: 16px;
        border-bottom: 1px solid #ababab;
    }

    .content {
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .item {
            width: 100px;
            background-color: #f3f4f5;
            text-align: center;
            height: 32px;
            line-height: 32px;
            margin: 7.5px;
            font-size: 15px;
        }
    }
}

.trim {
    height: 71px;
}

// 内容
.text {
    height: calc(100% - 100px);
            overflow: hidden;
    .text-item {
        width: 100%;
        display: flex;
        .text-item-left {
            width: 70px;
            height: 70px;
            margin: 15px;
        }

        .text-item-right {
            .title {
                width: 266px;
                height: 44px;
                padding-top: 16px;
                margin-bottom: 10px;
                font-size: 16px;
                text-align: left;
                color: #40404c;
                letter-spacing: 0;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                white-space: normal;
                text-overflow: ellipsis;
            }

            .foot {
                font-size: 16px;
                display: flex;
                height: 20px;
                line-height: 20px;
                i{
                    padding-top: 1px;
                }
                span{
                    font-size: 13px;
                    margin: 0px 10px;
                    color: #a3a3ac;
                }
            }
        }
    }
}
</style>